<template>
	<view>
		<view class="top" @click="ss(keyword)">
			<view class="top1">
				<image src="../../static/logo1.png" @click="tz(keyword)"
					style="width: 124rpx; height: 87rpx; margin-top: 28rpx;" mode=""></image>
				<u-search shape="round" :showAction="false" v-model="keyword" @search="search"
					style="width: 530rpx; height: 68rpx; float: right; margin: 42rpx 0rpx; opacity: 50%;"></u-search>
			</view>
		</view>
		<view class="page-body" :style="'height:'+height+'px'">
			<view class="nav-left" :style="'height:'+height+'px'">
				<scroll-view :scroll-y="true" :style="'height:'+height+'px'">
					<view class="nav-left-item" @click="categoryClickMain(index,item.id)" :key="index"
						:class="index==current?'active':''" v-for="(item,index) in tx">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="nav-right" :style="'height:'+height+'px'">
				<scroll-view :scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="scrolltolower">
					<image :src="imageCals" class="banner" mode=""></image>
					<view class="nav_rig_item">
						<view class="titl">{{titls}}</view>
						<u-empty v-if="list.length==0" marginTop="50"></u-empty>
						<view class="nav_box">
							<block v-for="(item,index) in list" :key="index">
								<view class="box_item" @click="cart(item.id)">
									<image :src="item.image" mode=""></image>
									<text>{{item.name}}</text>
								</view>
							</block>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cptx
	} from '@/api/api.js'
	import {
		xljz
	} from '@/api/api.js'
	import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				tx: '',
				pid: '',
				id: '',
				jz: '',
				ttx: '',
				current: 0,
				kk: false,
				enmpy: false,
				nomore: false,
				keyword: "",
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: classifyData,
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672,
					7017
				], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51 
				list:[],//商品数据
				total:0,
				page: 1,
				isLoading:false,
				titls:'',
				imageCals:''
			}
		},
		created() {
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function(options) {
//分享微信好友
       if (this.$wechat && this.$wechat.isWechat()) {
		this.$wechat.share();
       }
			this.height = uni.getSystemInfoSync().windowHeight - 50;
			console.log(options)
			this.pid = options.pid;
			this.id = options.id;

			this.c_ptx();
		},
		onReachBottom() {
			console.log(1111)
		},


		onReady() {
			// this.getHeightList();
		},
		updated() {
			this.getHeightList();
		},
		methods: {
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight = rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect) {
						// 					rect.id      // 节点的ID
						// 					rect.dataset // 节点的dataset
						// 					rect.left    // 节点的左边界坐标
						// 					rect.right   // 节点的右边界坐标
						// 					rect.top     // 节点的上边界坐标
						// 					rect.bottom  // 节点的下边界坐标
						// 					rect.width   // 节点的宽度
						// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
					})
					// console.log(arr)
					_this.arr = arr
				}).exec()
			},

			scroll(e) {
				let _this = this
				if (this.timeoutId) {
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function() { //节流
					_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length; i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i + 1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							(_this.diff > 0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this
								.diff) / (classifyData.length - 1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index,id) {
				console.log(index)
				console.log(this.tx[index])
				this.current = index;
				this.ttx = this.tx[index].list;
				this.titls=this.tx[index].name
				this.imageCals=this.tx[index].image
				this.pid=id
				this.page=1
				this.list=[]
				this.x_ljz()
				console.log(this.ttx)
				// this.categoryActive = index;
				// this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop + 1 : this.scrollTop = this.arr[
				// 	index] //防止两次相等造成点击不触发滚动时间

			},

			gaibian() {
				let index = this.current;
				this.ttx = this.tx[index].list;
			},
			cart: function(id) {
				uni.navigateTo({
					url: "./cp_detail?id=" + id
				})
			},
			tz(keyword) {
				uni.navigateTo({
					url: 'sousuo?keyword=' + keyword
				})
			},

			// 获取分类
			c_ptx: function() {
				let index =
					cptx().then(res => {
						console.log(res)
						this.tx = res.data;
						this.pid=res.data[0].id
						this.titls=res.data[0].name
						this.imageCals=res.data[0].image
						this.x_ljz()
						this.gaibian();
					})
			},

			scrolltolower(){
				if(this.page*12>=this.total){
					uni.showToast({
						title:'已加载全部数据',
						icon:'none'
					})
					return
				}
				if(this.isLoading)return
				this.page++
				this.x_ljz()
			},
			// 获取商品数据
			x_ljz: function() {
				this.isLoading=true
				xljz({
					pid: this.pid,
					page: this.page
				}).then(res => {
					this.isLoading=false
					console.log(res,'商品数据');
					this.total=res.data.total
					this.list.push(...res.data.data)
				})
			},

			onNavigationBarSearchInputChanged(e) {
				console.log(e);
				this.keyword = e.text;
			},
			ss(keyword) {
				uni.navigateTo({
					url: 'sousuo?keyword=' + keyword
				})
			},

			search(keyword) {
				uni.navigateTo({
					url: './sousuo_lb?keyword=' + keyword
				})
				console.log('search', keyword);
			}

		},
		components: {}
	}
</script>

<style lang="scss">
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.top {
		width: 100%;
		height: 160rpx;
		background-color: #007AFF
	}

	.top1 {
		width: 700rpx;
		height: 160rpx;
		margin: 0 auto;
		background-color: #007AFF
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 222rpx;
		background-color: #F1F1F1;
	}

	.nav-left-item {
		height: 100upx;
		background-color: #fff;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F1F1F1;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	.box {
		/* height: 100%; */
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		min-height: 100vh;
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		min-height: 100vh;
	}

	.nav-right-item {
		width: 150rpx;
		height: 150rpx;
		float: left;
		text-align: center;

		font-size: 28upx;
		background: #fff;
		margin: 50rpx 18rpx;
		/* 		margin-right: -10rpx; */
	}

	.nav-right-item image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx 10rpx;
	}

	.active {
		color: #333C68;
		font-weight: 600;
		background: #fff;
		border-right: 0;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.nav-right{
		padding: 24rpx 21rpx 24rpx 22rpx;
		box-sizing: border-box;
		.banner{
			width:492rpx;height: 153rpx;
			margin-bottom: 27rpx;
		}
		.nav_rig_item{
			.titl{
				font-size: 28rpx;font-weight: 700;
				margin-bottom: 9rpx;
			}
			.nav_box{
				display: flex;flex-wrap: wrap;
				.box_item{
					display: flex;flex-direction: column;
					width: 150rpx;margin-bottom: 27rpx;
					margin-right: 18rpx;
					&:nth-child(3n){
						margin-right: 0;
					}
					image{
						width: 150rpx;height: 150rpx;
						margin-bottom: 15rpx;
					}
					text{
						font-size: 24rpx;color: #ccc;
						text-align: center;
					}
				}
			}
		}
	}

</style>
